<template>
	<el-dialog
		:title="dialog.title"
		v-model="dialog.visible"
		:append-to-body="true"
		:close-on-click-modal="false"
		width="950px"
		top="0"
	>
		<div>
			<el-form :inline="true" :model="form" class="demo-form-inline">
				<el-form-item label="商品名称">
					<el-input v-model="form.goods_name" placeholder="商品名称关键词" />
				</el-form-item>
				<el-form-item label="商品分类">
					<el-cascader
						v-model="form.category_id"
						:options="shopCategorys"
						:props="{
							value: 'id',
							label: 'cat_name',
							children: 'children',
							emitPath: false
						}"
						clearable
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSearch">查询</el-button>
				</el-form-item>
			</el-form>
			<select-goods-table
				ref="selectGoodsTable"
				@select="selectionSelect"
			/>
			<div>
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="pageInfo.page_index"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageInfo.page_size"
					layout="total, sizes, prev, pager, next, jumper"
					:total="pageInfo.tatal_count"
				/>
			</div>
		</div>
		<template #footer>
			<el-button @click="cancle" size="small">取消</el-button>
			<el-button type="primary" @click="doSubmit" size="small">选择勾选</el-button>
		</template>
	</el-dialog>
</template>

<script>
import SelectGoodsTable from "./selectGoodsTable.vue";
export default {
	name: "select-dialog",
	components: {
		SelectGoodsTable
	},
	emits: ["select"],
	data() {
		return {
			dialog: {
				title: "选择商品",
				visible: false
			},
			goodsData: [],
			goodsSelect: [],
			shopCategorys: [],
			form: {},
			baseUrl: "",
			pageInfo: {
				page_index: 1,
				page_size: 10,
				tatal_count: 100
			}
		};
	},
	methods: {
		async getBaseUrl() {
			const that = this;
			that.$API.gdshop.attachment.getBaseUrl().then((res) => {
				that.baseUrl = res.data.base_url;
			});
		},
		selectionSelect(selections) {
			this.goodsSelect = selections;
		},
		handleSizeChange(_val) {
			this.pageInfo.page_size = _val;
			this.getGoodsData();
		},
		handleCurrentChange(_val) {
			this.pageInfo.page_index = _val;
			this.getGoodsData();
		},
		/**
		 * @description 打开面板
		 */
		open() {
			this.dialog.visible = true;
		},
		/**
		 * @description 关闭面板
		 */
		cancle() {
			this.dialog.visible = false;
		},
		/**
		 * @description 初始化表单为新建模式
		 */
		async create(data = {}) {
			console.log(data);
			await this.getBaseUrl();
			this.getData();
			this.open();
		},
		getsShopCategorys() {
			this.$API.shop.category
				.list({
					type_str: "shop"
				})
				.then((res) => {
					if (res.code === 0) {
						this.shopCategorys = this.$TOOL.deepTree(res.data, "parent_id");
					}
					else {
						this.$message.error(res.message);
					}

				});
		},
		getGoodsData() {
			const that = this;
			this.$API.shop.goods
				.page({
					page: this.pageInfo.page_index,
					page_size: this.pageInfo.page_size
				})
				.then((res) => {
					console.log(res);
					if (res.code === 0) {
						let resData = res.data;
						that.pageInfo.page_index = resData.pagination.page;
						that.pageInfo.page_size = resData.pagination.size;
						that.pageInfo.tatal_count = resData.pagination.total;
						that.$refs["selectGoodsTable"].initData("select", that.baseUrl, resData.list);
					}
					else {
						that.$message.error(res.message);
					}
				});
		},
		async getData() {
			this.getsShopCategorys();
			this.getGoodsData();
		},
		onSearch() {},
		doSubmit() {
			this.$emit("select", this.goodsSelect);
			this.cancle();
		}
	}
};
</script>

<style scoped></style>
